<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <script src="bootstrap/js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="bootstrap/css/index.css">
    <script src="js/jquery-3.5.1.min.js"></script>
<!--    <link rel="stylesheet" href="bootstrap/css/animate.min.css">-->
</head>
<body>
    <header class="myHeader navbar-fixed-top">
        <nav class="navbar navbar-default container">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">
                        <img src="images/header-nav.png" alt="" class="headerNavImg">
                    </a>
                </div>

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                    <ul class="nav navbar-nav navbar-right zrm-nav">
                        <li><a href="#" onclick="return false">HOME</a></li>
                        <li><a href="#" onclick="return false">ABOUT</a></li>
                        <li><a href="#" onclick="return false">HOW TO DINE</a></li>
                        <li><a href="#" onclick="return false">TESTIMONIALS</a></li>
                        <li><a href="#" onclick="return false">INSIDE DINE</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" onclick="return false">DOWNLOAD</a>
                        </li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
    </header>
    <section class="wrapCar">
        <!--    这是背景轮播    -->
        <div class="MyCar">
            <!--    这是背景轮播里的文字    -->
            <div class="container  allText"  >
                <div class="allFirst">
                    <div class="col-xs-6 left-pic">
                        <img src="images/CarTextImg.png" alt="">
                    </div>
                    <div class="col-xs-6 right-text">
                        <span class="text1">FOLLOW US</span>
                        <span class="glyphicon glyphicon-camera mycamara"></span>
                        <span class="f">f</span>
                    </div>
                </div>
                <div class="allSecond">
                    <p class="secondText">More Dates, Not Swipes.</p>
                </div>
                <div class="allThird"><p class="text">Get <span>Dine</span> Dating App Free Now!</p></div>
                <div class="allForth">
                    <div class=>
                        <img src="images/wrapforrhleft.png" alt="" class="forth-left">
                        <img src="images/wrapforrhright.png" alt="" class="forth-right">
                    </div>
                </div>
                <div class="allFive"><p>AVAILABLE IN USA, CANADA.</p></div>
            </div>
        </div>
    </section>
    <main class="myMain">
        <div class="theOne">
            <div class="col-md-5 a-pic " ><img src="images/iphone1.png" alt=""></div>
            <div class=" col-md-7 a-text">
                <div class="twoText">
                    <p class="p1">Skip The Small Talk. Meet For a First Date.</p>
                    <p class="p2">Dine is a dating app that isn't about superficial
                        love at first sight, but an opportunity to experience someone's
                        company and a new culinary adventure. Aren't we all tired of
                        the endless swiping left to right see that we only matched
                        with someone we didn't like in the first place? Dine
                        introduces to high quality potential matches Daily. Simply
                        request them to Dine and if they accept, skip the small talk
                        and meet up for a first date over the best food and drinks around!
                    </p>
                </div>
            </div>
        </div>
        <div class="theTwo">
            <div class=" col-md-7 b-text">
                <div class="three-text">
                    <p class="p1">Lock in a Date!</p>
                    <p class="p2">
                        Once a match is made on Dine, the date and location has already
                        been decided and accepted on. The next, use “Date Lock” a feature
                        that allows you to well…lock in a date. Suggest 3-5 days you are
                        available and your match will agree to meet you on one of those
                        dates. Final step, meet up!
                    </p>
                    <span class="glyphicon glyphicon-circle-arrow-down"> &nbsp;DOWNLOAD</span>
                </div>
            </div>
            <div class=" col-md-5 b-pic">
                <img src="images/iphone2.png" alt="">
            </div>
        </div>
        <div class="theThree">
            <div class=" col-md-4 a-pic"><img src="images/iphone3.png" alt=""></div>
            <div class=" col-md-8 a-text">
                <div class="threeText">
                    <p class="p1">How To Use Dine</p>
                    <p class="p2">Dine is very simple to use. A perfect dating app for busy people that delivers high value.
                    </p>
                    <div class="uerDine">
                        <div class="col-md-6">
                            <img src="images/how1.png" alt="">
                            <p>1. NEW PEOPLE DAILY</p>
                            <span>We will introduce you to new people and their favorite food spots every day!</span>
                        </div>
                        <div class="col-md-6">
                            <img src="images/how2.png" alt="">
                            <p>2. SENDING A REQUEST</p>
                            <span>See someone you like? Ask them to Dine!</span>
                        </div>
                    </div>
                    <div class="uerDine">
                        <div class="col-md-6">
                            <img src="images/how3.png" alt="">
                            <p>3. DINE REQUEST ACCEPTED</p>
                            <span>If your Dine request is accepted, start a conversation!</span>
                        </div>
                        <div class="col-md-6">
                            <img src="images/how4.png" alt="">
                            <p>4. FIRST DATE!</p>
                            <span>Make sure to confirm with your match the time and day you will meet!</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="theFour">
            <div id="carousel-example-generic" class="carousel slide col-md-8 mySeCon myBox" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
                </ol>

                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    <div class="item active">
<!--                        <img src="images/iphone1.png" alt="...">-->
                        <div class="carousel-caption">
                            <span class="glyphicon glyphicon-hand-down"></span>
                            <p>Being consistently charming in a text conversation, especially with a complete stranger, is not necessarily a perfect indicator of whether you'll be compatible. That's why Dine tries to get you in the same room.</p>
                            <img src="images/item1.jpg" alt="">
                            <p>NATHAN MCALONE</p>
                            <span>Business Inside</span>
                        </div>
                    </div>
                    <div class="item">
<!--                        <img src="images/iphone2.png" alt="...">-->
                        <div class="carousel-caption">
                            <span class="glyphicon glyphicon-hand-down"></span>
                            <p>Having similar taste in food is a major plus (and obviously the cornerstone of any healthy relationship?). It's perfect for foodies looking for a partner with similar taste buds.</p>
                            <img src="images/item2.jpg" alt="">
                            <p>BIANCA HEYWARD</p>
                            <span>Refinery 29</span>
                        </div>
                    </div>
                    <div class="item">
<!--                        <img src="images/iphone3.png" alt="...">-->
                        <div class="carousel-caption">
                            <span class="glyphicon glyphicon-hand-down"></span>
                            <p>Apps like Tinder have taken every spark of magic and excitement out of dating. In contrast, Dine is focused on giving you both a night of culinary culture, and good company too, setting you up with people that choose similar restaurants in your area.</p>
                            <img src="images/item3.jpg" alt="">
                            <p>OLIVIA FLEMING</p>
                            <span>THE INDIE GIRL</span>
                        </div>
                    </div>
                    <div class="item">
<!--                        <img src="images/iphone2.png" alt="...">-->
                        <div class="carousel-caption">
                            <span class="glyphicon glyphicon-hand-down"></span>
                            <p>Dine is all about skipping the "funny business" and hitting restaurants, bars and cafés with the people you like.</p>
                            <img src="images/item4.jpg.png" alt="">
                            <p>LUIS D</p>
                            <span>phone Arena.com</span>
                        </div>
                    </div>
                    ...
                </div>


                <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-arrow-left left" ></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-arrow-right right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>

        </div>
        <div class="theFive">
            <div a-text>
                <p>App Screenshots</p>
                <span>Many people are waiting to get out and Dine. Get started today.</span>
            </div>
            <div class="roll">
                <ul class="rollUl">
                    <li class="rollLi"><img src="images/screen01.jpg" alt=""></li>
                    <li class="rollLi"><img src="images/screen02.jpg" alt=""></li>
                    <li class="rollLi"><img src="images/screen03.jpg" alt=""></li>
                    <li class="rollLi"><img src="images/screen04.jpg" alt=""></li>
                    <li class="rollLi"><img src="images/screen05.jpg" alt=""></li>
                    <li class="rollLi"><img src="images/screen01.jpg" alt=""></li>
                    <li class="rollLi"><img src="images/screen02.jpg" alt=""></li>
                    <li class="rollLi"><img src="images/screen03.jpg" alt=""></li>
                </ul>
                <div class="BtnDot">
                    <span class="glyphicon glyphicon-chevron-left left"></span>
                    <span class="glyphicon glyphicon-chevron-right right"></span>
                    <ul class="Dot1">
                        <li class="one"></li>
                        <li class="two"></li>
                        <li class="three"></li>
                        <li class="four"></li>
                        <li class="five"></li>
                    </ul>
                </ul>
            </div>
        </div>
        </div>
        <div class="theSix">
            <div class="a-text">
                <p>Download the App</p>
                <span>Forget all the back and forth texting and just go on a date already!</span>
            </div>
            <div class="secPic">
                <img src="images/wrapforrhleft.png" alt="">
                <img src="images/wrapforrhright.png" alt="">
            </div>
            <div class="c-pic"><img src="images/iphone4.png" alt=""></div>
        </div>
        <div class="theSeven">

        </div>
        <div class="theEight">
            <div class="a-pic">
                <ul class="autoPic">
                    <li><img src="images/phonearena1.png" class="one" alt=""></li>
                    <li><img src="images/phonearena2.png" class="two" alt=""></li>
                    <li><img src="images/phonearena3.png" alt=""></li>
                    <li><img src="images/phonearena4.png" alt=""></li>
                    <li><img src="images/phonearena5.png" alt=""></li>
                    <li><img src="images/phonearena6.png" alt=""></li>
                    <li><img src="images/phonearena1.png" class="one" alt=""></li>
                    <li><img src="images/phonearena2.png" class="two" alt=""></li>
                    <li><img src="images/phonearena3.png" alt=""></li>
                    <li><img src="images/phonearena4.png" alt=""></li>
                    <li><img src="images/phonearena5.png" alt=""></li>
                </ul>
            </div>
        </div>
        <div class="theNine">
            <div class="col-md-6 allTextWrap">
                <p class="p1">About Us</p>
                <span class="s1">We are a start-up that was created in July 2015.
                    Our main business currently is the development and operation
                    of Dine, and our aim to address certain core issues with existing
                    online dating services and become the most popular Dating App
                    worldwide. Our company name Mrk & Co comes from our goal to
                    leave our mark on the world.</span>
                <p class="p2">About the team</p>
                <span class="s2">The company is headed by former members of DeNA,
                    the Japanese mobile games giant. The co-founders developed many
                    social games over multiple years starting with one of the most
                    successful social games in Japan “Kaito Royale” and many other
                    hit titles. Titles that saw North American success such as “Blood
                    Brothers” and an NFL IP title followed. With Dine, we will maximize
                    the benefit of our live operations knowledge and skills honed by our
                    experience in social games, optimizing our KPIs and improving
                    customer satisfaction.</span>
                <div class="line">
                    <div class="wrapline">
                        <p class="col-sm-4 	col-xs-4">Founded</p>
                        <span class="col-sm-8 col-xs-8">July 17 2015</span>
                    </div>

                    <div class="wrapline">
                        <p class="col-sm-4 	col-xs-4">Co-Founder & CEO</p>
                        <span class="col-sm-8 col-xs-8">Keisuke Kamijo</span>
                    </div>

                    <div class="wrapline">
                        <p class="col-sm-4 	col-xs-4">Co-Founder & CTO</p>
                        <span class="col-sm-8 col-xs-8">Takashi Morioka</span>
                    </div>

                    <div class="wrapline">
                        <p class="col-sm-4 	col-xs-4">Headquarters</p>
                        <span class="col-sm-8 col-xs-8">Dai-Go Kanou Bldg 5F, 3-26-16, Shibuya, Shibuya-ku, Tokyo, Japan</span>
                    </div>

                    <div class="wrapline">
                        <p class="col-sm-4 	col-xs-4">Tokyo Office</p>
                        <span class="col-sm-8 col-xs-8">Dogenzaka Sky Bldg 8F, 28-1, Maruyama-cho, Shibuya-ku, Tokyo, Japan</span>
                    </div>

                    <div class="wrapline">
                        <p class="col-sm-4 	col-xs-4">Contact</p>
                        <span class="col-sm-8 col-xs-8">support@dinewith.co</span>
                    </div>

                </div>
                <div class="lastCenter">
                    Contact Us
                </div>
            </div>
        </div>
    </main>
    <footer>
        <div class="container">
            <img src="images/footerpic.png" class="pic" alt="">
            <p>
                <span class="glyphicon glyphicon-camera camara"></span>
                <span class="f">f</span>
            </p>
            <p class="text">© 2016 Mrk & Co. All Rights Reserved</p>
        </div>
    </footer>


    <i class="glyphicon glyphicon-hand-up sign"></i>

    <script src="bootstrap/js/index.js"></script>
<!--    <script src="bootstrap/js/wow.min.js"></script>-->
<!--    <script>-->
<!--        var wow = new WOW({-->
<!--            boxClass: 'wow',-->
<!--            animateClass: 'animated',-->
<!--            offset: 0,-->
<!--            mobile: true,-->
<!--            live: true-->
<!--        });-->
<!--        wow.init();-->
<!--    </script>-->
</body>
</html>